<!-- tabBar组件 -->
<template>
	<view class="tabBar">
		<view class="tabBar-child">
			<view :class="{
				'item':true,
				'item2': res.midButton
			}" v-for="(res,index) in list" :key="index" @click="ChangBar(res,index)"
				:style="{width:( 100 / list.length) + '%'}">
				<image class="item-image" :src="current === index ? res.iconPath : res.selectedIconPath" mode="">
				</image>

				<text :class="{
					'item-text':true,
					'item-text2': current === index
				}">{{res.text}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		name: "tabBar",
		data() {
			return {
				list: [{
						pagePath: "pages/homeTab/index",
						iconPath: "/static/images/tabbarHome.png",
						selectedIconPath: "/static/images/tabbarHomeI.png",
						text: '首页',
						customIcon: false,
					},
					{
						pagePath: "pages/cityPartyTab/index",
						iconPath: "/static/images/cityparty1.png",
						selectedIconPath: "/static/images/cityparty2.png",
						text: '同城组局',
						customIcon: false,
					},


					{
						pagePath: "",
						iconPath: "/static/images/add.svg",
						selectedIconPath: "/static/images/add.svg",
						text: '发布动态',
						midButton: true,
						customIcon: false,
					},
					{
						pagePath: "pages/activityTab/index",
						iconPath: "/static/images/tabbarArtist.png",
						selectedIconPath: "/static/images/tabbarArtistI.png",
						text: '动态',
						customIcon: false,
					},
					{
						pagePath: "pages/myTab/index",
						iconPath: "/static/images/tabbarMy.png",
						selectedIconPath: "/static/images/tabbarMyI.png",
						text: '我的',
						customIcon: false,
					},
				],
				current: 0

			};
		},
		computed: {
			...mapGetters(['tabCurrent']),
		},
		created() {
			this.current = this.tabCurrent
		},
		watch: {
			tabCurrent() {
				this.current = this.tabCurrent
			}
		},
		methods: {
			...mapMutations(['setTabCurrent']),


			ChangBar(e, index) {
				
				if(e.text === '发布动态'){
					let str = ''
					
					// #ifdef H5
						str = '/pages/publishTab/index'
					// #endif
					
					// #ifdef MP-WEIXIN
					str = '/pages/publishTab2/index'
					// #endif
					
					uni.navigateTo({
						url: str
					});
					
					return
				}
				this.setTabCurrent(index)
				
				uni.switchTab({
					url: '/' + this.list[index].pagePath
				})
			}
		}

	}
</script>

<style lang="less" scoped>
	.tabBar {
		&::after {
			display: block;
			content: '';
			height: 120rpx;
			width: 100%;
		}

		.tabBar-child {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			z-index: 1000;
			background-color: #0F0D21;
			border-radius: 40rpx 40rpx 0 0;
			#flex(-, center, flex-end);


			.item {
				#flex(column, flex-end, center);
				#padding(12rpx 0 20rpx 0);
				height: 100%;

				.item-image {
					#box(40rpx);
				}

				.item-text {
					#font(24rpx, #fdf3f3);
					margin-top: 16rpx;
				}
				
				.item-text2{
					color: #EC606F;
				}
			}

			.item2 {
				position: relative;

				.item-image {
					position: absolute;
					top: -24rpx;
					#box(68rpx);
					border: 10rpx solid #0f0d21;
					border-radius: 100%;
					z-index: 10;
				}

				.item-text {
					position: static;
					z-index: 100;
				}
			}


		}
	}
</style>